<template>
  <n-select
    :value="modelValue"
    :options="dicData"
    :loading="loading"
    :size="option?.size"
    :disabled="option?.disabled"
    :clearable="option?.clearable"
    :multiple="option?.multiple"
    :filterable="option?.filterable"
    :filter="option?.filter"
    :keyboard="option?.keyboard"
    :tag="option?.tag"
    :max-tag-count="option?.maxTagCount"
    :placement="option?.placement"
    :placeholder="option?.placeholder"
    :clear-filter-after-select="option?.clearFilterAfterSelect"
    :reset-menu-on-options-change="option?.resetMenuOnOptionsChange"
    :render-label="option?.renderLabel"
    :render-option="option?.renderOption"
    :render-tag="option?.renderTag"
    :on-create="option?.onCreate"
    @blur="option?.onBlur"
    @focus="option?.onFocus"
    @clear="option?.onClear"
    @search="option?.onSearch"
    @scroll="option?.onScroll"
    @update:show="option?.onUpdateShow"
    @update:value="(v, o) => (option?.onUpdate?.(v, o), $emit('update:modelValue', v, o))">
    <template #header><component :is="option?.renderHeader" /></template>
    <template #action><component :is="option?.renderAction" /></template>
    <template #empty><component :is="option?.renderEmpty" /></template>
    <template #arrow><component :is="option?.renderArrow" /></template>
  </n-select>
</template>

<script lang="ts" setup>
import { NSelect } from "naive-ui";
import { useDicData } from "./use-dic-data";
import type { SelectItemOption, SelectOption } from "../form-item-types";

const props = defineProps<{ modelValue: any; option?: SelectOption }>();

const { dicData, loading } = useDicData<SelectItemOption>(props);
</script>
